<template>
  <div class="myfavorite">
       <div class="box1">
        <h1>My favorit songs</h1>
        <div class="list">
            <div class="left">
                <ul>
                    <li v-for="(iteam,index) in myfavorite" :key="index">{{iteam}}</li>
                </ul>
            </div>
            <div class="right"></div>
        </div>
    </div>
     
  </div>
</template>

<script>
import axios from 'axios'
export default {
name:"MyFavorite",
data(){
    return{
    myfavorite:['11','22'],
    }
},
// methods:{
//     getsongs(){
//             //  var that =this;
//        axios.get("https://autumnfish.cn/search?keywords=毛不易")
//        .then(function(res){
//             console.log(res);
//        },
//        function(erro){
//             console.log(erro);
//        });
//     }
// },
// mounted:function(){
//     getsongs()
    
//      }

}
</script>

<style scoped>
.myfavorite{
    margin-top: 10px;
}
.box1 {
    width: 100%;
    height: 800px;
    background-image: linear-gradient(-45deg, rgb(142, 142, 255), rgb(133, 255, 133));
    margin: auto;
  }
.box1 h1{
    text-align: center;
    height: 50px;
}

.list{
    height: 750px;
    display: flex;
    flex-direction: row;
}
.list .left{
    flex: 3;
    background-color: rgb(255, 121, 68);
}
.list .left ul{
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 30px;
}
.list .left ul li{
    height: 30px;
}
.list .left ul li:nth-child(odd){
    background-color: rgba(242, 255, 125, 0.3);
}
.list .right{
      flex: 2;
      background-color: rgb(94, 255, 102);
}
</style>>

